<template>
	<view class="title-tools-wrap">
		<view class="left-icon">
			
		</view>
		<view class="title-text" :style="{fontSize: fontSize}">
			{{title}}
		</view>
		<view class="right-tools" v-if="subTitle" @click="toMore">
			{{subTitle}}<u-icon name="arrow-right" color="#929292" size="24"></u-icon>
		</view>
		<view class="right-tools right-center" v-else>
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'TitleTools',
		props: {
			title: {
				type: String | Number,
				default: ''
			},
			subTitle: {
				type: String | Number,
				default: ''
			},
			path: {
				type: String
			},
			fontSize: {
				type: String,
				default: '34rpx'
			},
			position: {
				type: String,
				default: 'right-tools'
			}
		},
		methods: {
			toMore () {
				if (!this.path) return
				if (this.path === 'audit') {
					this.$Router.push({
						name: this.path,
						params: {
							type: 1
						}
					})
				} else {
					this.$Router.push({
						name: this.path
					})
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title-tools-wrap {
		position: relative;
		// padding-top: 10rpx;
	}
	
	.left-icon {
		width: 8rpx;
		height: 34rpx;
		background: linear-gradient(0deg, #71ADFF 0%, #196EFF 100%);
		border-radius: 4rpx;
	}
	
	.title-text {
		position: absolute;
		left: 14rpx;
		top: 2rpx;
		height: 33rpx;
		font-weight: bold;
		color: #000000;
		line-height: 33rpx;
	}
	
	.right-tools {
		position: absolute;
		right: 0;
		top: 0;
		height: 33rpx;
		line-height: 33rpx;
		font-size: 26rpx;
		color: #929292;
	}
</style>
